VueRouter的params和query的区别

2022-05-29 20:58| 来源: 网络整理| 查看: 265

个人理解如有偏差欢迎指正

官方文档是和路由一起写的，我个人验证得到就算路由不进行配置，依旧能在下一个页面获取到param以及query的参数

个人测试如下

在router.js配置路由

{ path: '/submit',name:'submit',component: Submit,meta:routeMeta({title:'确认订单',layoutFooter:false,keepAlive: false})}

可看到并没有如官网说的那样配置

然后我在上个页面写一个点击事件

this.$router.push({ name: 'submit', params: {ids:1,2,3 }})

然后在submit的mounted中打印

mounted(){ console.log(this.$route.params) }

发现能接受到参数，此时就纠结那么为什么还要向官网那样配置路由，个人又通过不同的测试认为的原因如下：如果用户刷新当前这个页面就获取不到param参数，如果像官网说的那样配置路由就会在浏览器地址栏中有参数，刷新当前页面依旧能获取

query是不用配置路由在地址栏上依旧能显示参数，刷新当前页面依旧能获取到参数

两者的区别：

query的参数会在地址栏显示（路由未配置参数情况），刷新当前页面依旧能获取

params路由未配置参数情况，参数不会在地址栏显示，在页面能获取，但如果刷新页面就没了

那么问题来了，用query不就好了也不用配置路由的参数，那还要params干嘛，如果不配置路由，不管携带任何参数都能进入，配置了之后只有携带此参数的才能进入

此外还和路由传参props有关https://router.vuejs.org/zh/guide/essentials/passing-props.html

题外注意点：

【本文地址】

今日新闻